﻿ <% layout('adminlayout.html') -%>

<div ng-app="app" ng-controller="appController">


    <div>
        <div>
            <div class="alert alert-success" role="alert" style="text-align:right;">
                <button class="btn btn-warning" ng-click="loadData()">刷新</button>
                <button class="btn btn-success" ng-click="add()">添加新图集</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3" ng-repeat="o in list | orderBy:'createDate':true">
                <div class="thumbnail">
                    <img src="../files/upload/small/{{o.filename}}" alt="..." style="height:200px;cursor:pointer;" ng-click="showChidrenImgs(o)" class="img-responsive">
                    <div class="caption" style="border-top:1px solid #eee;margin-top:8px;">
                        <span>图集：{{o.title |sblit}}</span>
                        <p>描述：{{o.description | sblit}}</p>
                        <p>
                            <button class="btn btn-success" ng-click="addChidrenImg(o)" type="button"> <span class="badge">{{o.images.length}}</span> 添加</button>
                            <a href="#" class="btn btn-success" role="button" ng-click="edit(o)">编辑</a>
                            <a href="#" class="btn btn-danger" role="button" ng-click="remove(o._id,o.filename)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Modal  add rollimage -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel" style="color:#036f0f;">{{titleName}}</h4>
                </div>
                <div class="modal-body" style="text-align:center;">
                    <iframe id="uploadFrame" src="" width="400" height="240" style="border:0px;"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" ng-click="editFinish()">关闭</button>
                </div>
            </div>
        </div>
    </div>


    


    <!-- Modal  edit rollimage -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="color:#036f0f;">图集信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputEmail1">图集名称</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="" ng-model="editObj.title">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">描述</label>
                        <textarea class="form-control" rows="4" ng-model="editObj.description"></textarea>
                   </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" ng-click="save()" ng-disabled="form1.navType.$invalid">保存</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal  lit childrenimgs -->
    <div class="modal fade" id="listModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <div class="modal-dialog" role="document" style="width:90%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="color:#036f0f;">{{childrenTitle}}</h4>
                </div>
                <div class="modal-body" style="max-height:600px;overflow-y:scroll;">
                    <div class="row">
                        <div class="col-sm-6 col-md-4 col-lg-3" ng-repeat="o in childrenImg.images | orderBy:'createDate':false">
                            <div class="thumbnail">
                                <a href="/html_module/imgViewer.html?img={{o.filename}}" target="_blank"><img src="../files/upload/small/{{o.filename}}" alt="..." style="cursor:pointer;height:250px;" ng-click="" class="img-responsive"></a>
                                <div style="margin:5px 0px;">
                                    <textarea class="form-control" rows="4" ng-model="o.description" placeholder="输入描述" ng-change="o.saveText='请保存'"></textarea>
                                </div>
                                <div class="caption" style="border-top:1px solid #eee;margin-top:8px;">
                                    <p>
                                        <button class="btn btn-success" role="button" ng-click="childImgEdit(o)" ng-disabled="o.saveText!='请保存'">{{o.saveText}}</button>
                                        <button class="btn btn-success" role="button" ng-click="setCover(childrenImg,o)" ng-hide="o.filename==childrenImg.filename">设为封面</button>
                                        <button class="btn btn-danger" role="button" ng-click="childImgRemove(o)" ng-hide="o.filename==childrenImg.filename">删除</button>
                                        <span ng-show="o.filename==childrenImg.filename">封面</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    <div class="loading">
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div style="text-align:center;"><img src="../images/load.gif" /></div>
                        <div style="text-align:center;"><h1 style="color:#ff6a00;font-size:16px;">正在加载,请稍后......</h1></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal -->
    </div>
</div>
<script>
    var app = angular.module("app", []);

    app.filter('sblit', function () {
        return function (inputArray) {
            var len = inputArray.length;
            return len > 10 ? inputArray.substring(0, 10) + "..." : inputArray;
        }
    });
    app.controller('appController', function ($scope, $http) {
        


        $scope.loadData = function () {
            showLoading();
            var Jsondata = {};
            $http({
                url: '/admin/getproducts',
                method: 'POST',
                data: Jsondata
            }).success(function (response) {
                $scope.list = response;
                closeLoading();
            }).error(function () {
                alert("error");
                closeLoading();
            })
        }
        $scope.loadData();

        $scope.remove = function (_id, fileName) {
            //showLoading();
            if (!confirm("确定删除此项吗？")) return;
            var Jsondata = {};
            $http({
                url: '/admin/removeproduct?_id=' + _id + "&fileName=" + fileName,
                method: 'POST',
                data: Jsondata
            }).success(function (response) {
                $scope.loadData();
                //closeLoading();
            }).error(function () {
                alert("error");
                //closeLoading();
            })
        }

        $scope.add = function () {
            $scope.titleName = "选择新图集封面";
            $("#uploadFrame").attr("src", "../html_module/upload.html?params=type=productAdd");
            $('#addModal').modal({
                keyboard: true,
                backdrop: "static"
            })
        }

        $scope.editFinish = function () {
            $('#addModal').modal('hide');
            $scope.loadData();
        }

        $scope.edit = function (o) {
            $scope.editObj = {};
            //$scope.editObj.navType
            $scope.editObj._id = o._id;
            $scope.editObj.title = o.title;
            $scope.editObj.description = o.description;
            $('#editModal').modal({
                keyboard: true,
                backdrop: "static"
            })
        }

        $scope.save = function () {
            var Jsondata = $scope.editObj;
            //alert(JSON.stringify(Jsondata));
            $http({
                url: '/admin/editproduct',
                method: 'POST',
                data: Jsondata
            }).success(function (response) {
                $('#editModal').modal('hide');
                $scope.loadData();
            }).error(function () {
                alert("error");
            })
        }


        //以下是管理图集内的相片信息
        $scope.addChidrenImg = function (o) {
            $scope.titleName = "添加相片到：" + o.title;
            $("#uploadFrame").attr("src", "../html_module/upload.html?params=type=childrenImgAdd|parentId=" + o._id);
            $('#addModal').modal({
                keyboard: true,
                backdrop: "static"
            })
        }
        
        $scope.showChidrenImgs = function (o) {
            $scope.childrenTitle = o.title == '' ? "未命名" : o.title;
            $scope.parentId = o._id;
            for (i = 0; i < o.images.length; i++) {
                o.images[i].saveText = "已保存";
            }
            $scope.childrenImg = o;
            $('#listModal').modal({
                keyboard: true,
                backdrop: "static"
            })
        }

        $scope.childImgEdit = function (o) {
            o.parentid = $scope.parentId;
            var Jsondata = o;
            //alert(JSON.stringify(Jsondata));
            $http({
                url: '/admin/childImgEdit',
                method: 'POST',
                data: Jsondata
            }).success(function (response) {
                o.saveText = "已保存";
            }).error(function () {
               // alert("error");
            })
        }

        $scope.childImgRemove = function (o) {
            o.parentid = $scope.parentId;
            var Jsondata = o;
            //alert(JSON.stringify(Jsondata));
            
            $http({
                url: '/admin/removechildrenImg',
                method: 'POST',
                data: Jsondata
            }).success(function (response) {
                for (i = 0; i < $scope.childrenImg.images.length; i++) {
                    if ($scope.childrenImg.images[i]._id == o._id) {
                        $scope.childrenImg.images.splice(i, 1);
                        break;
                    }
                }
            }).error(function () {
                // alert("error");
                //alert("hi");
            })
        }

        $scope.setCover = function (childrenImg, o) {
            var Jsondata = {};
            Jsondata._id = childrenImg._id;
            Jsondata.filename = o.filename;       
            $http({
                url: '/admin/setCover',
                method: 'POST',
                data: Jsondata
            }).success(function (response) {
                $scope.childrenImg.filename = o.filename;
            }).error(function () {
                // alert("error");
            })
        }
    });

</script>

